{% extends "index.html" %}
{% block MyCss %}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/asciinema-player.css">
    <style>
        /* 模态框主体 */
        #video-body {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
            border-radius: 25px;
        }
    </style>
{% endblock MyCss %}
{% block Mybody %}
    <div>
        <table class="table table-condensed">
            <thead>
            <tr>
                <th>#</th>
                <th>主机别名</th>
                <th>主机名</th>
                <th>IP地址</th>
                <th>操作人</th>
                <th>开始时间 - 结束时间</th>
                <th>播放</th>
            </tr>
            </thead>
            <tbody>
            {% for video in videos %}
                <tr>
                    <th scope="row">{{ video.id }}</th>
                    <td>{{ video.host.hostalias }}</td>
                    <td>{{ video.host.hostname }}</td>
                    <td>{{ video.host.ip }}</td>
                    <td>{{ video.operator }}</td>
                    <td>{{ video.createtime|date:'Y-m-d H:d:s' }} - {{ video.endtime|date:'Y-m-d H:d:s' }}</td>
                    <td>
                        <button type="button" class="btn btn-warning" onclick="playerClick('{{ video.id }}')">播放
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock Mybody %}
{% block Myjs %}
    <script src="/static/js/asciinema-player.js"></script>
    <script>
        function playerClick(id) {
            window.open('/host/videos?id=' + id);
        }
    </script>
{% endblock Myjs %}